<template>
	<view class="nav">
		<view class="nav-view" :class="changeColor?'active':''" :style="'padding-top:' + statusBarHeight + 'px'">
			<view class="nav-cv">
				<view class="top-default" v-if="defaultShow">
					<image class="backImg" src="@/static/images/icon-back.png" mode="widthFix" @click="touchBack" v-if="backShow"></image>
					<view class="name">{{title}}</view>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		
		<view class="custom_margin" :style="'padding-top:' + (statusBarHeight+55) + 'px'" v-if="customShow"></view>
		<view class="custom_margin" :style="'padding-top:' + statusBarHeight + 'px'" v-else></view>
	</view>
	
</template>

<script>
	export default{
		components:{},
		props:{
			title:{
				type:String,
				default:''
			},
			indexText:{
				type:String,
				default:''
			},
			defaultShow:{
				type:Boolean,
				default:false
			},
			backShow:{
				type:Boolean,
				default:true
			},
			changeColor:{
				type:Boolean,
				default:false
			},
			customShow:{
				type:Boolean,
				default:true
			},
		},
		data(){
			return{
				statusBarHeight: 0,
				tabIndex:0,
				candidates:['选项一','选项二','选项三','选项四'],
				inputValue:'',
				numValue:0
			}
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods:{
			touchNavTab(item,index){
				this.tabIndex = index
				this.$emit('touchNavTab',{item,index})
			},
			touchBack(){
				uni.navigateBack({
					delta:1
				})
			},
			input(e){
				console.log(e) // 选项一
			},
			select(e){
				console.log(e) // 选项一
			},
			touchToSearch(){
				//搜索
				uni.navigateTo({
					url:'/pages/search/index'
				})
			},
			touchToService(){
				//客服
			},
			touchToNotify(){
				//通知
				uni.navigateTo({
					url:'/pages/mine/message'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		overflow-x: hidden;
	}
	.nav {
		width: 100%;
	}
	.nav-view {
		position: relative;
		// background-color: #FFA71B;
		background-color: transparent;
		position: fixed;
		align-items: center;
		top: 0;
		left: 0;
		z-index: 989;
		width: 100%;
		background-color: #CCDCF8;
	}
	.nav-view.active {
		background-color: #383F4F;
	}
	::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		display: none;
	}
	.nav-cv {
		padding: 0 20rpx;
		// height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.title {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	.top-tabs{
		padding-left: 148rpx;
		position: relative;
		height: 45px;
		width: 100%;
		overflow-x: hidden;
		.logo {
			position: absolute;
			left: 20rpx;
			top: 50%;
			width: 100rpx;
			transform: translateY(-50%);
		}
		.scroll-cv {
			width: 100%;
			white-space: nowrap;
			.item{
				padding: 10rpx 40rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: inline-block;
				.txt {
					border-bottom: 2rpx solid transparent;
				}
				&.active{
					.txt {
						border-bottom-color: #ffffff;
					}
				}
			}
		}
		
	}
	.top-tabs2 {
		position: relative;
	}
	.custom_margin {
		box-sizing: content-box;
		width: 100%;
	}
	.top-search {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.top-search .name {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}
	.top-home-btn .name {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 0rpx;
		color: #FFFFFF;
	}
	.top-home-btn .name text {
		color: #0066FF;
	}
	.top-search .logo {
		width:84rpx;
		margin-right: 10rpx;
	}
	.search {
		flex: 1;
		background-color: #FFFFFF;
		margin-left: 30rpx;
	}
	.top-tabs2 {
		height: 90rpx;
	}
	.top-tabs-search {
		width: 100%;
	}
	.backImg {
		width: 18rpx;
		margin-right: 20rpx;
	}
	.imgSao {
		width: 36rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.nav-right-btn {
		text-align: center;
		position: relative;
	}
	
	.nav-right-btn text {
		display: block;
		font-size: 16rpx;
		color: #fff;
		margin-left: 30rpx;
	}
	.nav-right-btn .icon-search{
		width: 37rpx;
		height: 37rpx;
		margin-right: 40rpx;
	}
	.nav-right-btn .no-margin {
		margin-right:0;
	}
	.nav-right-btn .wait-num {
		position: absolute;
		right: -0rpx;
		top: -0rpx;
		background-color: #FD6662;
	}
	.icon-search2 {
		width: 37rpx;
		height: 37rpx;
	}
	.nav-right-btn .icon-service{
		width: 42rpx;
		height: 37rpx;
	}
	.icon-tishi {
		width: 37rpx;
		height: 37rpx;
		margin-right: 40rpx;
	}
	.icon-notify {
		width: 33rpx;
		height: 38rpx;
	}
	
	.icon-collect {
		width: 34rpx;
		height: 37rpx;
	}
	.search-cv {
		flex: 1;
		border-radius: 16rpx;
		height: 58rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.search-btn {
		padding: 0 20rpx;
		position: relative;
	}
	.search-btn::before {
		content:'';
		display: block;
		position: absolute;
		left: 0;
		top: 4rpx;
		bottom: 4rpx;
		width: 2rpx;
		background-color: #333;
	}
	.search-input {
		flex: 1;
		height: 58rpx;
		padding: 0 20rpx;
	}
	.top-default {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: relative;
	}
	.top-default .name {
		position: absolute;
		right: 100rpx;
		left:100rpx;
		font-size: 28rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #333;
		// font-weight: bold;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 600;
	}
	.top-tabs-view {
		height: 45px;
		width: 100%;
	}
	/deep/ .top-tabs-view .u-tabs__wrapper {
		height: 45px;
	}
	
	
</style>